import { defineComponent } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { getDutyListApi, deleteDutyApi } from './service';
import { getTableColumns, getTableFormSchema } from './tableConfig';
import { createTableAction } from '@/components/Table/src/hooks/createTableAction';
import ActionModal from './modules/ActionModal';
import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';

export default defineComponent({
  name: 'TeacherDuty',
  setup() {
    const {
      createMessage: { success },
    } = useMessage();

    const [registerTable, { reload }] = useTable({
      title: '教师值班管理',
      api: getDutyListApi,
      fetchSetting: {
        listField: 'data.records',
      },
      columns: getTableColumns(),
      showTableSetting: true,
      bordered: true,
      useSearchForm: true,
      formConfig: {
        labelWidth: 80,
        baseColProps: { span: 5 },
        schemas: getTableFormSchema(),
      },
      actionColumn: {
        width: 100,
        title: '操作',
        fixed: 'right',
        customRender: ({ record }) =>
          createTableAction([
            {
              label: '编辑',
              icon: 'ant-design:edit-outlined',
              onClick: () => {
                openActionModal(true, { record, type: 'edit' });
              },
            },
            {
              label: '删除',
              danger: true,
              icon: 'ant-design:delete-outlined',
              popConfirm: {
                title: '确定删除？',
                confirm: async () => {
                  await deleteDutyApi(record.DutyScheduleID);
                  success('删除成功');
                  reload();
                },
              },
            },
          ]),
      },
    });

    const [registerActionModal, { openModal: openActionModal }] = useModal();

    const tableTopAction = createTableAction(
      [
        {
          label: '新增值班',
          icon: 'ant-design:plus-outlined',
          onClick: () => openActionModal(true, { type: 'add' }),
        },
      ],
      { type: 'top', outside: true },
    );

    return () => (
      <div>
        <BasicTable onRegister={registerTable}>
          {{
            headerTop: () => tableTopAction,
          }}
        </BasicTable>
        <ActionModal onRegister={registerActionModal} onReload={reload} />
      </div>
    );
  },
});
